<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link href="../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<!--App自定义的css-->
		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
		<style>
			h5 {
				margin: 5px 7px;
			}
			.mui-input-row .mui-btn {
			    line-height: 1.1;
			    float: right;
			    width:65%;
			    padding: 10px 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户管理</h1>
			<button type="button" id="butSaveTop" class="mui-btn mui-btn-link  mui-pull-right">
				保存
			</button>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">
				
				<form class="mui-input-group" id="fmInput">
					<div class="mui-input-row">
						<label>用户名称:</label>
						<input type="text" placeholder="请输入" v-model="fmUser.usertitle">
					</div>
					<div class="mui-input-row">
						<label>手机号:</label>
						
						<div v-if="opMode == 'edit'">{{fmUser.mobile}}</div>
						<input v-else type="text" placeholder="请输入" v-model="fmUser.mobile">
				
					</div>

					<div class="mui-input-row">
						<label>性别:</label>
						<select class="mui-btn mui-btn-block" v-model="fmUser.sex">
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>

					<li class="mui-table-view-cell mui-collapse"  style="list-style-type:none">
						<a class="mui-navigate-right" href="#">权限:</a>
						<div class="mui-collapse-content">
							<div v-for="tra in fmUser.ltModus" class="mui-input-row mui-checkbox mui-right">
								<label>{{tra.moduname}}</label>
								<input name="chkTradeArea" :value="tra.moduname" v-model="tra.checked" type="checkbox"/>
							</div>
							
						</div>
					</li>
					
					<div class="mui-button-row">
						<button type="button" id="butSave" class="mui-btn mui-btn-primary" >确认</button>&nbsp;&nbsp;
						<button type="button" id="butCancel" class="mui-btn mui-btn-danger">取消</button>
					</div>
					
				</form>
				
				
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/tools.js"></script>

		<script>
			var theVue;
			
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			
			
			document.getElementById("butCancel").addEventListener('tap', function(e) 
			{
				mui.back();
			});
			
			function fnSave()
			{
				if(theVue.fmUser.usertitle.trim() == "")
				{
					mui.toast("用户名称不能为空");
					return;
				}
				
				if(theVue.fmUser.mobile == undefined || theVue.fmUser.mobile.trim() == "")
				{
					mui.toast("手机号不能为空");
					return;
				}
				
				if(g_jsonData.getData("opMode") == "new")
				{
					sespost('/zdm/AppApi/UserAuth/AddUser',
					theVue.fmUser,
					function(stat)
					{
						if(stat == 1)
						{
							mui.toast("保存成功");
							mui.back();
						}
						else
						{
							mui.toast("保存失败");
						}
					});
				}
				else
				{
					theVue.fmUser.UserId = g_jsonData.getData("editUserId");
					sespost('/zdm/AppApi/UserAuth/UpdateUser',
					theVue.fmUser,
					function(stat)
					{
						if(stat == 1)
						{
							mui.toast("保存成功");
							mui.back();
						}
						else
						{
							mui.toast("保存失败");
						}
					});
				}
			}

					
			
			document.getElementById("butSave").addEventListener('tap', function(e) 
			{
				fnSave();
			});

			document.getElementById("butSaveTop").addEventListener('tap', function(e) 
			{
				fnSave();
			});


			mui.plusReady(function() {
				
			});

		function fillModus(p_strModus)
    		{
    			var ms = [
			{moduname:"订单处理",checked:false},
			{moduname:"商品管理",checked:false},
			{moduname:"餐厅设置",checked:false},
			{moduname:"营业时间",checked:false},
			{moduname:"账单查询",checked:false},
			{moduname:"取现",checked:false},
			{moduname:"异常订单",checked:false}
			];
			
    			if(p_strModus != undefined && p_strModus != null && p_strModus != "")
    			{
    				for(var iM=0;iM<ms.length;iM++)
    				{
    					var curModu = ","+ms[iM].moduname+",";
    					if((","+p_strModus+",").indexOf(curModu)>-1)
    					{
    						ms[iM].checked = true;
    					}
    				}
    			}
    			
    			return ms;
    		}

		</script>
		
		<script>
		theVue = new Vue({
		    el:'#fmInput',
		    created:function()
		    {
		    		
		    }
		    ,
		    methods:{
		    		
		        fnsubmit:function()
		        {
		        
		        }
		    },
		    data:
		    {
		    		opMode:g_jsonData.getData("opMode"),
			    fmUser:
			    {
					usertitle:"",
					mobile:"",
					sex:"",
					ltModus:[]
				}
				
		    }		
		});
		
		
</script>
		
		
<script>  
	
	if(g_jsonData.getData("opMode") == "edit")
	{
		sespost('/zdm/AppApi/UserAuth/GetUserInfo',
		{UserId:g_jsonData.getData("editUserId")},
		function(p_Data)
		{                                 
			theVue.fmUser = p_Data;
			theVue.fmUser.ltModus = fillModus(p_Data.rights);
		});
	}
	else
	{
		theVue.fmUser.ltModus = fillModus();
	}
	
	
	
    var procinstid = 0;  
    //初始化页面执行操作  
    function plusReady() {  
        //Android返回键监听事件  
        plus.key.addEventListener('backbutton',function(){  
            //myclose();  
        },false);  
    }  
    if (window.plus) {  
        plusReady();  
    } else {  
        document.addEventListener('plusready', plusReady, false);  
    }  
    
    
    
</script> 		
		
	</body>

</html>